<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>矩形绘制</title>
</head>

<body>
   <canvas id="c1" width="800" height="800"></canvas>
   <script>
      const c1 = document.getElementById('c1')
      const ctx = c1.getContext("2d")

      // 1、填充模式fillRect(位置x，位置y，宽度，高度)
      // ctx.fillRect(100, 100, 200, 300)

      // 填充模式，拆开写法
      // ctx.fillStyle = "green"
      // ctx.rect(100, 100, 100, 200)
      // ctx.fill()

      // 2.路径绘制矩形(位置x，位置y，宽度，高度)
      // ctx.strokeRect(100, 100, 100, 200)
      // ctx.fillRect(150, 200, 100, 200)
      // let height = 0
      // let width = 0
      // let t1 = setInterval(() => {
      //    height++
      //    // 3.清除模式
      //    ctx.clearRect(0, 0, c1.clientWidth, height)
      //    if (height > c1.clientHeight) {
      //       clearInterval(t1)
      //    }
      // }, 10)

      // 路径模式，拆开写法
      // ctx.rect(150, 200, 100, 200)
      // ctx.stroke()

      // 提示开始，结束beginPath/closePath完成分段路径渲染
      ctx.beginPath()
      ctx.rect(150, 200, 100, 200)
      ctx.stroke()
      ctx.closePath()

      ctx.beginPath()
      ctx.rect(100, 100, 100, 200)
      ctx.fill()
      ctx.closePath()

   </script>
</body>

</html>